<template>
  <div id="centerRight2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="align-left" class="text-icon"></icon>
        </span>
        <span class="fs-xl text mx-2" style="font-size: 16px">当日告警统计</span>
      </div>
      <div class="d-flex ai-center flex-column body-box">
        <dv-capsule-chart class="dv-cap-chart" :config="config"/>
        <centerRight2Chart1 ref="centerRight2Chart1"/>
      </div>
    </div>
  </div>
</template>

<script>
import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
import {getprocesslist, getalarmcount} from "@/api";

export default {
  async mounted() {
    getalarmcount().then(res => {
      console.log('res1111111=>', res)
      const {result} = res
      let indicatorData1 = []
      let dataBJ = []
      let dataGZ = []
      let dataSH = []
      result.alarmStat.map(v => {
        const keys = Object.keys(v)
        indicatorData1.push({name: keys[0]})
        dataBJ.push(v[keys].statisticDetail.High || 0)
        dataGZ.push(v[keys].statisticDetail.Critical || 0)
        dataSH.push(v[keys].statisticDetail.Low || 0)
      })
      console.log('dataBJ=>', dataBJ)
      console.log('dataGZ=>', dataGZ)
      console.log('dataSH=>', dataSH)

      this.$refs.centerRight2Chart1.cdata.indicatorData = indicatorData1
      this.$refs.centerRight2Chart1.cdata.dataBJ = dataBJ
      this.$refs.centerRight2Chart1.cdata.dataGZ = dataGZ
      this.$refs.centerRight2Chart1.cdata.dataSH = dataSH

    })
    let startTime = new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime(); // 当天0点
    startTime = new Date(startTime).toISOString()
    let strEndTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime();
    strEndTime = new Date(strEndTime).toISOString()
    let data1 = {
      "archiveStatus": "0",
      "categoryName": [],
      "endTime": strEndTime,
      "groupId": 1,
      "level": ["High"],
      "nodeId": [],
      "processType": null,
      "queryType": "self",
      "recoverStatus": null,
      "sortKey": "eventTime",
      "sortType": "DESC",
      "startTime": startTime,
      "index": 0,
      "count": 10
    }
    let data2 = {
      "archiveStatus": "0",
      "categoryName": [],
      "endTime": strEndTime,
      "groupId": 1,
      "level": ["Low"],
      "nodeId": [],
      "processType": null,
      "queryType": "self",
      "recoverStatus": null,
      "sortKey": "eventTime",
      "sortType": "DESC",
      "startTime": startTime,
      "index": 0,
      "count": 10
    }
    let data3 = {
      "archiveStatus": "0",
      "categoryName": [],
      "endTime": strEndTime,
      "groupId": 1,
      "level": ["Critical"],
      "nodeId": [],
      "processType": null,
      "queryType": "self",
      "recoverStatus": null,
      "sortKey": "eventTime",
      "sortType": "DESC",
      "startTime": startTime,
      "index": 0,
      "count": 10
    }
    const {totalCount: highToltal} = await getprocesslist(data1)
    const {totalCount: LowToltal} = await getprocesslist(data2)
    const {totalCount: CriticalToltal} = await getprocesslist(data3)
    this.config =
        {
          data: [
            {
              name: '紧急',
              value: highToltal
            },
            {
              name: '重要',
              value: CriticalToltal
            },
            {
              name: '一般',
              value: LowToltal
            }
          ],
          colors: [
            '#fb7293',
            '#ffdb5c',
            '#9fe6b8',
          ]
        }
  },
  data() {
    return {
      config: {}
    }
  },
  components: {centerRight2Chart1}
}
</script>

<style lang="scss" scoped>
#centerRight2 {
  $box-height: 410px;
  $box-width: 340px;
  padding: 5px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;

  .bg-color-black {
    padding: 5px;
    height: $box-height;
    width: $box-width;
    border-radius: 10px;
  }

  .text {
    color: #c3cbde;
  }

  .body-box {
    border-radius: 10px;
    overflow: hidden;

    .dv-cap-chart {
      width: 100%;
      height: 160px;
    }
  }
}
</style>
